Viroshop Pro Documentation
Viroshop comes packed with some pretty awesome Shortcodes to create content fast and efficiently.
Shortcodes
Checkout the Viroshop features page to see the shortcodes. You can either copy and paste the code from the demo into the "HTML" tab on your post/page or use the following.
Layout Grid
[one_full] <h3>Full Column</h3><p> Scaffolding is a simple base grid system with semantic class names which makes remembering them much easier! There is also a non-semantic last class to add to the last div in a row. This class simply removes the right margin.</p> [/one_full] [divider] [one_half] <h3>1/2 Column</h3><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae libero nec erat consequat aliquam. </p> [/one_half] [one_half_last] <h3>1/2 Last Column</h3><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae libero nec erat consequat aliquam.</p> [/one_half_last] [divider] [one_third] <h3>1/3 Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> [/one_third] [one_third] <h3>1/3 Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> [/one_third] [one_third_last] <h3>1/3 Last Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> [/one_third_last] [divider] [two_third] <h3>2/3 Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> [/two_third] [one_third_last] <h3>1/3 Last Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna, Eleifend ut et magna consectetur adipiscing eli.</p> [/one_third_last] [divider] [one_fourth] <h3>1/4 Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] <h3>1/4 Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] <h3>1/4 Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] <h3>1/4 Last Column</h3><p> Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider]
Icon Section
[one_fourth] [icon icon="new" title="New"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="open" title="Open"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="close" title="Close"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="home" title="Home"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="shield" title="Shield"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="truck" title="Truck"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="parcel" title="Parcel"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="bag" title="Bag"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="download" title="Download"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="giftbox" title="Giftbox"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="search" title="Search"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="security" title="Security"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="dollar" title="Dollar"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="card" title="Card"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="basket" title="Basket"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="tag" title="Tag"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="bulb" title="Bulb"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="tele_light" title="Telephone"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="unlock" title="Unlock"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="card_light" title="Card"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="camera" title="Camera"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="cd" title="CD"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="gear" title="Gear"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="poll" title="Poll"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="currency_dollar" title="Dollar"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="currency_euro" title="Euro"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="currency_pound" title="Pound"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="currency_yuan" title="Yuan"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="hyperlink" title="Hyperlink"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="basket_light" title="Basket"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="puzzle" title="Puzzle"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="lock_light" title="Lock"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="cart_light" title="Cart"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="bag_light" title="Bag"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="sale_dark" title="Sale"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="suitcase" title="Suitcase"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last] [divider] [one_fourth] [icon icon="clock" title="Clock"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="monitor" title="Monitor"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth] [icon icon="globe" title="Globe"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth] [one_fourth_last] [icon icon="new_dark" title="New"] <h3>1/4 Column</h3> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p> [/one_fourth_last]
Products
<h3>Recent Products</h3> [recent_products per_page="3" columns="3" orderby="date" order="desc"] <h3>Featured Products</h3> [featured_products per_page="3" columns="3"] <h3>Category Products</h3> [product_category category="womenswear" per_page="3" columns="3" orderby="date" order="desc"]
Media
<h3>Youtube Embed</h3> [youtube autoplay="0" controls="1" showinfo="0" autohide="1" id="nsnTdMQMPhM"] [one_full] <h3>Vimeo Embed</h3> [/one_full] [vimeo autoplay="0" title="0" byline="1" loop="0" id="25943947"] [one_full] <h3>Dailymotion Embed</h3> [/one_full] [dailymotion autoplay="0" id="xpaqka"]
Buttons
[one_full] <h3>Standard Buttons</h3><p> [button]Default[/button] [button colour="red"]Red[/button] [button colour="orange"]Orange[/button] [button colour="blue"]Blue[/button] [button colour="green"]Green[/button] [button colour="pink"]Pink[/button] [button colour="magenta"]Magenta[/button] [button colour="yellow"]Yellow[/button]</p> [/one_full] [divider] [one_full] <h3>Flat Buttons</h3><p>[button type="flat"]Default[/button] [button type="flat" colour="red"]Red[/button] [button type="flat" colour="orange"]Orange[/button] [button type="flat" colour="blue"]Button[/button] [button type="flat" colour="green"]Green[/button] [button type="flat" colour="pink"]Pink[/button] [button type="flat" colour="magenta"]Magenta[/button] [button type="flat" colour="yellow"]Yellow[/button]</p> [/one_full] [divider] [one_full] <h3>Small Buttons</h3><p>[button type="small"]Default[/button] [button type="small" colour="red"]Red[/button] [button type="small" colour="orange"]Orange[/button] [button type="small" colour="blue"]Button[/button] [button type="small" colour="green"]Green[/button] [button type="small" colour="pink"]Pink[/button] [button type="small" colour="magenta"]Magenta[/button] [button type="small" colour="yellow"]Yellow[/button]</p> [/one_full] [divider] [one_full] <h3>Medium Buttons</h3><p>[button type="medium"]Default[/button] [button type="medium" colour="red"]Red[/button] [button type="medium" colour="orange"]Orange[/button] [button type="medium" colour="blue"]Button[/button] [button type="medium" colour="green"]Green[/button] [button type="medium" colour="pink"]Pink[/button] [button type="medium" colour="magenta"]Magenta[/button] [button type="medium" colour="yellow"]Yellow[/button]</p> [/one_full] [divider] [one_full] <h3>Large Buttons</h3><p>[button type="large"]Default[/button] [button type="large" colour="red"]Red[/button] [button type="large" colour="orange"]Orange[/button] [button type="large" colour="blue"]Button[/button] [button type="large" colour="green"]Green[/button] [button type="large" colour="pink"]Pink[/button] [button type="large" colour="magenta"]Magenta[/button] [button type="large" colour="yellow"]Yellow[/button]</p> [/one_full] [divider] [one_full] <h3>Rounded Buttons</h3><p>[button type="rounded"]Default[/button] [button type="rounded" colour="red"]Red[/button] [button type="rounded" colour="orange"]Orange[/button] [button type="rounded" colour="blue"]Button[/button] [button type="rounded" colour="green"]Green[/button] [button type="rounded" colour="pink"]Pink[/button] [button type="rounded" colour="magenta"]Magenta[/button] [button type="rounded" colour="yellow"]Yellow[/button]</p> [/one_full]
Miscellaneous
[one_full]<h3>Google Maps</h3>[/one_full] [googlemap src="http://maps.google.co.nz/maps?q=Marina+Bay,+Bayside+Road,+Gibraltar,+Spain&hl=en&ll=36.148133,-5.351264&spn=0.010639,0.01678&sll=36.137741,-5.345374&sspn=0.042561,0.06712&oq=marinagibraltar&gl=nz&t=m&z=16&iwloc=A"] [one_third] <h3>Dropcap</h3><p> [dropcap]L[/dropcap] orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p> [/one_third] [one_third] <h3>Square Dropcap</h3><p> [square_dropcap]1[/square_dropcap] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p> [/one_third] [one_third_last] <h3>Round Dropcap</h3><p> [round_dropcap]2[/round_dropcap] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p> [code][round_dropcap]3[/round_dropcap][/code] [/one_third_last] [divider] [contact success="Thankyou for your message! We will get back to you shortly."]